<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="loading">
        <!-- 公司信息 -->
        <tree-tool
          :item="companyObj"
          class="tree-tool"
          @add-dept="handleShowAddDialog"
        />
        <!-- 部门信息 -->
        <el-tree
          :data="deptTreeData"
          :props="{ label: 'name', children: 'children' }"
          default-expand-all
        >
          <template #default="{ data }">
            <!-- 使用组件、传递自定义属性(父传子) -->
            <tree-tool
              :item="data"
              @del-dept="handleDelDept"
              @add-dept="handleShowAddDialog"
              @edit-dept="handleShowEditDialog"
            />
          </template>
        </el-tree>
      </el-card>

      <!-- 使用add-dept组件 -->
      <!--
      <add-dept
        :is-show="isShow"
        @abc="isShow = false"
      /> -->

      <!--
          .sync修饰符总结：
          1.  .sync修饰符只是个语法糖
          2.  以这个代码为例：<jack :title.sync="myTitle"></jack>
              等同于:
                <jack
                    :title="myTitle"
                    @update:title="把组件传递来的新值赋值给myTitle数据"
                  >
                </jack>
          v-model指令：
           也只是个语法糖，本质是 :value + @input
       -->

      <!-- 用.sync修饰符改写 -->
      <!-- 添加部门 -->
      <add-dept
        :is-show.sync="isShow1"
        :dept-list="deptList"
        :item="deptObj"
        @add-dept-success="getDeptList"
      />

      <!-- .sync修饰符的原理 -->
      <!-- <add-dept
        :is-show="isShow"
        @update:is-show="isShow = false"
      /> -->

      <!-- 编辑部门 -->
      <edit-dept
        :is-show.sync="isShow2"
        :dept-list="deptList"
        :item="deptObj"
        @edit-dept-success="getDeptList"
      />
    </div>
  </div>
</template>

<script>
// 这几天项目着重关注的几个点：
// 1. 路由守卫(为什么获取用户信息要在前置守卫中发请)
// 2. 登录token拦截
// 3. token过期处理
// 4. 路由拆模块(动静路由表如何划分和配合工作)
// 5. 左侧菜单如何生成的?
// 6. 数组如何转树?(拓展：树如何转回数组？)
import { getDeptListAPI, delDeptAPI } from '@/api/departments'
import { arr2Tree } from '@/utils/shift'
import TreeTool from './components/tree-tool.vue'
import AddDept from './components/add-dept.vue'
import EditDept from './components/edit-dept.vue'
export default {
  name: 'DepartmentsView',
  components: {
    TreeTool,
    AddDept,
    EditDept
  },
  data() {
    return {
      // 部门列表
      deptList: [],
      // 部门树形数据
      deptTreeData: [],
      // 公司信息对象
      companyObj: {
        id: '', // 公司id
        name: '', // 公司名称
        manager: ''// 公司管理人
      },
      // 控制add-dept弹框的显示
      isShow1: false,
      // 控制edit-dept弹框的显示
      isShow2: false,
      // 记录当前操作的部门对象
      deptObj: { },
      // 控制盒子的加载提示
      loading: false
    }
  },
  created() {
    this.getDeptList()
  },
  methods: {
    // 获取部门列表
    async getDeptList() {
      // 请求前显示loading状态
      this.loading = true
      // 调接口发请求
      const { data: resp } = await getDeptListAPI()
      // 保存数据在data中
      this.companyObj.id = resp.companyId
      this.companyObj.name = resp.companyName
      this.companyObj.manager = resp.companyManage
      // 对depts列表式的结构转换为树形结构，赋值给data数据，方可给tree组件使用
      this.deptTreeData = arr2Tree(resp.depts, '')
      // 保存一份列表数据
      this.deptList = resp.depts
      // 请求结束关闭loading状态
      this.loading = false
    },
    // 删除部门
    async handleDelDept(deptId) {
      try {
        // 1. 询问
        await this.$confirm('此操作不可逆,确定删除么?', '温馨提示', {
          type: 'warning',
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        })
        // 2. 确定
        //   2.1 发请求(通知后台，从数据库中删除)
        await delDeptAPI(deptId)
        //   2.2 获取部门列表
        this.getDeptList()
        //   2.3 给个删除成功的提示
        this.$message.success('删除成功')
      } catch (err) {
        // 3. 取消
      }
    },
    // 显示添加部门弹框
    handleShowAddDialog(deptObj) {
      this.isShow1 = true
      // 给正在操作部门对象赋值
      this.deptObj = deptObj
    },
    // 显示编辑部门弹框
    handleShowEditDialog(deptObj) {
      this.isShow2 = true
      // 给正在操作部门对象赋值
      this.deptObj = deptObj
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  padding: 10px;
  font-size: 14px;
}
::v-deep .el-row {
  height: 32px;
  line-height: 32px;
}
</style>
<style lang="scss" scoped>

.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
